<template>
	<view class="container">
		<view class="header">
			<view class="title">
				<u-icon name="clock" color="#fff" size="44"></u-icon>
				<view class="status">
					<view class="big">{{dataArr.order_status_msg}}</view>
					<view class="small" v-if="dataArr.status_code == 'nopay'">需支付：{{dataArr.goods_amount}}</view>
					<view class="small" v-else-if="dataArr.order_status_msg == '待发货'">正在努力为您处理订单，我们回尽快为您发货</view>
				</view>
			</view>
		</view>
		<view class="flots">
			<view class="icon">
				<u-icon name="map" size="30" color="#333"></u-icon>
			</view>
			<view class="user_info">
				<view class="info">{{dataArr.receiver_name}} <text style="margin-left: 20rpx;">{{dataArr.mobile}}</text>
				</view>
				<view class="address">
					{{dataArr.receiver_state + dataArr.receiver_city + dataArr.receiver_district + dataArr.receiver_address}}
				</view>
			</view>
		</view>
		<view class="shop_box">
			<view class="shop_list" v-for="(item,index) in dataArr.items" :key="index">
				<image :src="item.pic" mode="aspectFill"></image>
				<view class="shop_info">
					<view class="shop_name">{{item.item_name}}</view>
					<view class="sku">
						<view class="skus">{{item.item_spec_desc}}</view>
					</view>
					<view class="sku_price">
						<view class="skus"><text>￥</text>{{(item.price/100).toFixed(2)}}</view>
						<view class="number">x {{item.num}}</view>
					</view>
				</view>
			</view>
			<view class="kefu">
				<u-icon name="server-man" size="30" color="#999"></u-icon>联系客服
			</view>
		</view>
		<view class="line"></view>
		<view class="order_info">
			<view class="list">
				<view class="title">
					订单编号
				</view>：
				<view class="content">
					{{dataArr.order_id}}
					<view class="copy" @click="copyClick(dataArr.order_id)">复制</view>
				</view>
			</view>
			<view class="list">
				<view class="title">
					下单时间
				</view>：
				<view class="content">
					{{$dTime(dataArr.create_time)}}
				</view>
			</view>
			<view class="list">
				<view class="title">
					配送方式
				</view>：
				<view class="content">
					普通快递
				</view>
			</view>
			<view class="list">
				<view class="title">
					留言
				</view>：
				<view class="content">
					{{dataArr.remark?dataArr.remark:'暂无'}}
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="price" v-if="dataArr.status_code !== 'nopay'">
			<text></text>
			<view>
				<text class="title">实付款：</text>
				<text class="total">￥{{(Number(dataArr.total_fee)/100).toFixed(2)}}</text>
			</view>
		</view>
		<view class="zhifu" v-if="dataArr.status_code == 'nopay'">
			<view class="text">需支付：<text>￥{{dataArr.goods_amount}}</text></view>
			<view class="btns">
				<view class="btn" @click.stop="cancelClkick(dataArr.id)">取消订单</view>
				<view class="btn green" @click="payClick">去支付</view>
			</view>
		</view>
		<view class="zhifu" v-if="dataArr.status_code == 'noget'">
			<view class="text"></view>
			<view class="btns">
				<view class="btn"></view>
				<view class="btn green" @click="goshouhuo">确认收货</view>
			</view>
		</view>
		<u-popup v-model="payShow" mode="bottom" :closeable="true">
			<view class="mask_box">
				<view class="mask_title">请选择支付方式</view>
				<view class="pay_list">
					<view class="pay" @click="payType = 'wechat'">
						<view class="title">
							<image src="@/static/images/shops/wx.png" mode="aspectFill"></image>
							微信支付
						</view>
						<view class="select">
							<image src="@/static/images/shops/select.png" mode="" v-if="payType == 'wechat'"></image>
							<view class="yuan" v-else></view>
						</view>
					</view>
					<view class="pay" @click="payType = 'wallet'">
						<view class="title">
							<image src="@/static/images/shops/yue.png" mode="aspectFill"></image>
							余额支付<text style="font-size: 24rpx;color: #666;">({{money}})</text>
						</view>
						<view class="select">
							<image src="@/static/images/shops/select.png" mode="" v-if="payType == 'wallet'"></image>
							<view class="yuan" v-else></view>
						</view>
					</view>
					<view class="pay_btn" @click="pay_btn">确认支付</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="show" :content="content" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '',
				content: '是否取消该订单',
				dataArr: null,
				money: '0.00',
				total: '',
				order_sn: '',
				payShow: false,
				payType: 'wechat',
				show: false,
			}
		},
		onLoad(opdata) {
			this.order_id = opdata.order
			// this.$u.api.getUSerInfo().then(res => {
			// 	this.money = res.data.money
			// })
			this.getData()
		},
		methods: {
			async getData() {
				uni.showLoading({
					title: '加载中'
				})
				await this.$allApi.orderDetail({
					order_id: this.order_id
				}).then(res => {
					console.log(res);
					this.dataArr = res.data.orderInfo
					uni.hideLoading()
				})
			},
			goshouhuo() {
				this.$u.api.confirms({
					id: this.order_id,
					order_item_id: 0
				}).then(res => {
					this.getData()
				})
			},
			confirm() {
				this.$u.api.orderCancels1({
					id: this.cancelId
				}).then(res => {
					this.$u.toast('取消订单成功')
					this.page = 1
					this.getData()
				})
			},
			cancelClkick(id) {
				this.show = true
				this.cancelId = id
			},
			payClick(item) {
				this.payShow = true
				console.log(this.dataArr)
				this.total = this.dataArr.goods_amount
				this.order_sn = this.dataArr.order_sn
			},
			pay_btn() {
				if (this.payType == 'wallet') {
					this.$u.api.goPrepay({
						order_sn: this.order_sn,
						payment: this.payType
					}).then(res => {
						this.$u.toast('支付成功')
						this.getData()
						this.order_sn = ''
						this.payShow = false
						this.page = 1
					})
				} else {
					this.$u.api.goPrepay({
						order_sn: this.order_sn,
						payment: this.payType,
						platform: 'wxMiniProgram'
					}).then(res => {
						let pay = res.data.pay_data
						let that = this.data
						uni.requestPayment({
							timeStamp: pay.timeStamp,
							nonceStr: pay.nonceStr,
							package: pay.package,
							signType: pay.signType,
							paySign: pay.paySign,
							// 支付成功的回调
							success(result) {
								console.log(result)
								if (result.errMsg == "requestPayment:ok") {
									that.$u.toast('支付成功')
									that.getData()
									that.order_sn = ''
									that.payShow = false
									that.page = 1
								}

							},
							// 支付失败回调
							fail(err) {
								uni.showToast({
									icon: "none",
									title: "支付失败"
								})
							}
						})
					})

				}
			},
			copyClick(con) {
				let that = this
				uni.setClipboardData({
					data: con,
					showToast: false,
					success: function() {
						that.$u.toast('复制成功')
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.mask_box {
		padding: 30rpx;

		.pay_btn {
			height: 80rpx;
			width: 690rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background: #dc4342;
			border-radius: 10rpx;
		}

		.pay {
			display: flex;
			align-items: center;
			height: 120rpx;
			padding: 20rpx 0;

			justify-content: space-between;
			background: #fff;
			margin-bottom: 1px;

			.title {
				font-size: 30rpx;
				display: flex;
				align-items: center;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}
			}

			.select {
				image {
					width: 50rpx;
					height: 50rpx;
				}

				.yuan {
					width: 48rpx;
					height: 48rpx;
					border: 1px solid #aaa;
					border-radius: 50%;
				}
			}
		}
	}

	.price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;

		.title {
			font-weight: bold;
			color: #666;
		}

		.total {
			font-size: 34rpx;
			font-weight: bold;
			color: red;
			padding-right: 20rpx;
		}
	}

	.zhifu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 106rpx;
		position: fixed;
		bottom: 0;
		width: 100vw;
		padding: 0 20rpx;
		left: 0;
		border-top: 1px solid #eee;

		.text {
			text {
				font-size: 30rpx;
				font-weight: bold;
				color: red;
			}
		}

		.btns {
			padding-left: 30rpx;
			display: flex;
			align-items: center;

			.btn {
				padding: 14rpx 30rpx;
				border: 1px solid #eee;
				border-radius: 10rpx;
				font-size: 30rpx;
				margin-left: 30rpx;
				color: #333;
			}

			.green {
				background: #dc4342;
				color: #fff;
				border: 0;
			}
		}
	}

	.header {
		height: 230rpx;
		background: #dc4342;

		.title {
			height: 140rpx;
			display: flex;
			align-items: center;
			padding: 30rpx;

			.status {
				color: #fff;
				margin-left: 20rpx;

				.big {
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.line {
		height: 20rpx;
		width: 100vw;
		background: #f6f6f6;
	}

	.flots {
		height: 174rpx;
		width: 710rpx;
		margin-left: 20rpx;
		background: #fff;
		border-radius: 10rpx;
		margin-top: -90rpx;
		box-shadow: 0px 2px 5px 2px #ccc;
		padding: 20rpx;
		display: flex;

		.user_info {
			padding-left: 20rpx;
			width: 350rpx;
			line-height: 1.5;
			flex: 1;

			.address {
				width: 640rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 这里是超出几行省略 */
				overflow: hidden;
			}
		}
	}

	.shop_box {
		margin-top: 20rpx;
		padding: 20rpx;

		.shop_list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eee;
			padding: 20rpx 0;

			image {
				width: 164rpx;
				height: 164rpx;
				border-radius: 10rpx;
			}

			.shop_info {
				flex: 1;
				margin-left: 20rpx;

				.sku {
					display: flex;
					margin-top: 20rpx;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999;
				}

				.sku_price {
					display: flex;
					margin-top: 20rpx;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #333;
					font-weight: bold;

					text {
						font-size: 24rpx;
						font-weight: normal;
					}

					.number {
						font-size: 24rpx;
						font-weight: normal;
						color: #999;
					}
				}
			}
		}

		.kefu {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 84rpx;
			color: #999;
		}
	}

	.order_info {
		padding: 0 20rpx;

		.list {
			// height: 70rpx;
			color: #666;
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eee;

			.content {
				display: flex;
				align-items: center;
			}

			.title {
				display: inline-block;
				width: 120rpx;
				text-align: justify;
				text-align-last: justify;
			}

			.copy {
				width: 90rpx;
				height: 40rpx;
				display: flex;
				margin-left: 30rpx;
				align-items: center;
				font-size: 24rpx;
				justify-content: center;
				border: 1px solid #ccc;
				border-radius: 15rpx;
			}
		}

		.list:last-child {
			border-bottom: 0;
		}
	}
</style>
